<template>
	<view>
		<view class="content">
			<view class="row">
				<view class="nominal">
					收件人
				</view>
				<view class="input">
					<input placeholder="请输入收件人姓名" type="text" v-model="name" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					电话号码
				</view>
				<view class="input">
					<input placeholder="请输入收件人电话号码" type="text" v-model="tel" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					邮箱地址
				</view>
				<view class="input">
					<input placeholder="请输入邮箱" type="text" v-model="email" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					所在地区
				</view>
				<view class="input" @tap="chooseCity">
					{{region.label}}
				</view>
				
			</view>
			<view class="row">
				<view class="nominal">
					详细地址
				</view>
				<view class="input">
					<textarea v-model="detailed" auto-height="true" placeholder="输入详细地址"></textarea>
				</view>
			</view>
			
		</view>
		<view class="save" @tap="save">
			<view class="btn">
				保存地址
			</view>
		</view>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				editType:'edit',
				id:'',
				name:'',
				tel:'',
				email:'',
				detailed:'',
				isDefault:false,
				cityPickerValue: [0, 0, 1],
				themeColor: '#007AFF',
				region:{label:"请点击选择地址",value:[],cityCode:""},
				data:{
					address:'',
					email:'',
					id:'',
					userName:'',
					userPhone:''
					
				}
			};
		},
		onLoad() {
			this.getaddress()
		},
		methods: {
			onCancel(e) {
				console.log(e)
			},
			chooseCity() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.region = e;
				this.cityPickerValue = e.value;
			},
			isDefaultChange(e){
				this.isDefault = e.detail.value;
			},
			
			getaddress(){
				let id = uni.getStorageSync('userId')
				this.$http.post('/userAddress/getAddressInfo', {
					id: id
				}).then(res => {
					if (res.code == '0') {
						this.tel = res.data.userPhone
						this.name = res.data.userName
						this.email  =res.data.email
						this.region.label = res.data.address
						this.detailed = res.data.addressDetail
						this.id =res.data.id
					
						
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
			
			},
			save(){
				let data={"userName":this.name,"userPhone":this.tel,"email":this.email,"address":this.region.label,"id":this.id,"addressDetail":this.detailed}
				if(this.editType=='edit'){
					data.id = this.id
				}
				if(!data.userName){
					uni.showToast({title:'请输入收件人姓名',icon:'none'});
					return ;
				}
				if(!data.userPhone){
					uni.showToast({title:'请输入收件人电话号码',icon:'none'});
					return ;
				}
				if(!data.email){
					
					uni.showToast({title:'请输入邮箱',icon:'none'});
					return ;
				}else if(data.email){
					var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
					if (!regEmail.test(data.email)) {
						console.log(1)
						uni.showToast({title:'邮箱格式不正确',icon:'none'});
						// this.email= ''
					}
				}
				
				if(!data.addressDetail){
					uni.showToast({title:'请输入收件人详细地址',icon:'none'});
					return ;
				}
				// if(data.address.region.value.length==0){
				// 	uni.showToast({title:'请选择收件地址',icon:'none'});
				// 	return ;
				// }
				uni.showLoading({
					title:'正在提交'
				})
				let that = this
				that.$http.post('/userAddress/editorAddress',data
				 
				).then(res => {
					if (res.code == '0') {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						});
						setTimeout(function(){
							uni.switchTab({
								url:'../tab/person'
							})

						},1500)
						
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				})
				
				
				
			}
		},
		
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		}
	};
</script>
<style lang="scss">

.save{
		view{
			display: flex;
		}
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn{
			box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4);
			width: 70%;
			height: 80upx;
			border-radius: 80upx;
			background-color: rgb(253, 88, 10);
			color: #fff;
			justify-content: center;
			align-items: center;
			.icon{
				height: 80upx;
				color: #fff;
				font-size: 30upx;
				justify-content: center;
				align-items: center;
			}
			font-size: 30upx;
		}
	}
	.content{
		display: flex;
		flex-wrap: wrap;
		view{
			display: flex;
		}
		.row{
			width: 94%;
			
			margin: 0 3%;
			border-top: solid 1upx #eee;
			.nominal{
				width: 30%;
				height: 120upx;
				font-weight: 200;
				font-size: 30upx;
				align-items: center;
			}
			.input{
				width: 70%;
				padding: 20upx 0;
				align-items: center;
				font-size: 30upx;
				&.switch{
					justify-content: flex-end;
				}
				.textarea{
					margin: 20upx 0;
					min-height: 120upx;
				}
			}
			.del{
				width: 100%;
				height: 100upx;
				justify-content: center;
				align-items: center;
				font-size: 36upx;
				color: #f06c7a;
				background-color: rgba(255,0,0,0.05);
				border-bottom: solid 1upx #eee;
			}
		}
	}
	
</style>
